<template>
  <el-card class="box-card  ">
    <div slot="header" class="clearfix">
      <span>指令收发记录</span>
    </div>

      <el-table  :data="tableData"  style="width: 100%">
           <el-table-column type="expand">
              <template slot-scope="scope">
                <el-row :gutter="4">
                  <el-col :span="2">发送指令内容</el-col>
                  <el-col>{{scope.row.publishOrder}}</el-col>
                </el-row>

                <el-row :gutter="4">
                  <el-col :span="2">收到的回复</el-col>
                  <el-col>{{scope.row.replayOrder}}</el-col>
                </el-row>

              </template>
            </el-table-column>
            <el-table-column  prop="createTime" label="创建时间"   ></el-table-column>
           <el-table-column  prop="publishInstructid"  label="指令编号"  > </el-table-column>
           <el-table-column prop="createBy" label="创建人"></el-table-column>
     </el-table>

      <el-pagination v-if="total>0"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="queryParams.page"
           :page-sizes="[10, 20, 30, 40]"
           :page-size="queryParams.size"
           layout="total, sizes, prev, pager, next"
           :total="total">
         </el-pagination>

  </el-card>
</template>

<script>
   import {listApi} from '@/api/hat/orderlogs.js'
  export default{
    props:{
      device_id: {
        type: Number,
        required: true
      }
    },
    data () {
      return {
        queryParams: {
           page: 1,
           size: 10,
           deviceId: undefined
        },
        //表格单选状态
        tableData: [
        ],
        total:0,
      }
    },
    created() {
       if( this.device_id>0){
         this.queryParams.deviceId= this.device_id
         this.fetchData()
       }
    },
    methods:{
      handleSizeChange(val) {
        this.queryParams.page=1
        this.queryParams.size=val
        this.fetchData()
       },
        handleCurrentChange(val) {
           this.queryParams.page=val
         this.fetchData()
       },
       fetchData(){
         listApi(this.queryParams).then(resp=> {
           this.tableData=resp.rows
           this.total=resp.total
         })
       },
    },
    watch: {
      'device_id' : function (val, oldVal) {
        //当设备发生变化的时候，重新查询
         if(val>0){ 
            this.queryParams.deviceId=val 
            this.handleSizeChange(1)
         }
      }
    }
  }
</script>

<style>
</style>
